<template>
  <el-container style="height: 300px;padding: 10px">
    <el-table :data="tableData" max-height="300">
      <el-table-column prop="acc" label="预约账号" width="100" fixed>
      </el-table-column>
      <el-table-column prop="jsxm" label="预约教师" width="100">
      </el-table-column>
      <el-table-column prop="cid" label="主题类型" width="100">
      </el-table-column>
      <el-table-column prop="zxzt" label="咨询主题" width="150">
      </el-table-column>
      <el-table-column prop="bz" label="个人问题简述" width="300">
      </el-table-column>
      <el-table-column prop="yyrq" label="预约日期" width="120">
      </el-table-column>
      <el-table-column prop="yysj" label="预约时间段" width="120">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="120">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot:default="scope">
          <el-popconfirm confirm-button-text='好的'
                         cancel-button-text='不用了'
                         icon="el-icon-info"
                         icon-color="red"
                         @confirm="deleteRow(scope.$index, tableData)"
                         title="确定删除吗？">
            <el-button slot="reference" type="text" size="small">移除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-container>
</template>

<script>
export default {
  name: 'BookingHistory',
  data () {
    return {
      visible: false,
      tableData: [{
        id: '',
        acc: '',
        jsxm: '',
        cid: '',
        zxzt: '',
        bz: '',
        yyrq: '',
        yysj: '',
        createtime: '',
        state: ''
      }]
    }
  },
  methods: {
    deleteRow (index, rows) {
      this.visible = false
      this.$axios.get('student/center/' + rows.at(index).id + '/delete').then(resp => {
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
      rows.splice(index, 1)
    }
  },
  created () {
    this.$axios.get('student/center/' + this.$store.state.acc + '/history').then(resp => {
      this.tableData = resp.data
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
  }
}
</script>

<style scoped>
.el-container {
  padding: 20px 0;
  height: 200px;
  background-color: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>
